
<template>
    <div  class="app-container">
      <div class="header">  修改客户 </div>
      <div class="form-container">
        <div class="form">
          <el-form :model="studentInfo" status-icon :rules="rules" ref="studentForm" label-width="100px">
              <el-form-item label="名称" prop="username" >
                <el-input v-model="studentInfo.username"  placeholder="请输入姓名"/> 
              </el-form-item>

              <el-form-item label="性别" prop="sex" >
                <el-select v-model="studentInfo.sex" clearable placeholder="请选择性别">
                  <el-option v-for="item in sexs" :key="item.id" :label="item.name" :value="item.id"/>
                </el-select>
              </el-form-item>

              <el-form-item label="生日" prop="birth" >
                  <el-date-picker v-model="studentInfo.birth" value-format="timestamp" type="datetime" placeholder="请选择生日"/>
              </el-form-item>

              <el-form-item label="专业" prop="speciality.id">
                <el-select v-model="studentInfo.speciality.id" clearable placeholder="请选择专业">
                  <el-option v-for="item in specialitys" :key="item.id" :label="item.name" :value="item.id"/>
                </el-select>
              </el-form-item>
                
              <el-form-item label="类型" prop="level.id">
                <el-select v-model="studentInfo.level.id" clearable placeholder="请选择类型">
                  <el-option v-for="item in levels" :key="item.id" :label="item.name" :value="item.id"/>
                </el-select>
              </el-form-item>

              <el-form-item label="状态" prop="isEnable" >
                <el-select v-model="studentInfo.isEnable" clearable placeholder="请选择状态">
                  <el-option v-for="item in status" :key="item.id" :label="item.name" :value="item.id"/>
                </el-select>
              </el-form-item>

              <el-form-item label="手机号码" prop="phoneNum" >
                  <el-input v-model="studentInfo.phoneNum"  placeholder="请输入手机号码"/>
              </el-form-item>

              <el-form-item label="地址" prop="address" >
                  <el-input v-model="studentInfo.address" placeholder="请输入地址 随便的没限制"/>
              </el-form-item>

              <el-form-item label="创建时间" prop="createTime" >
                  <el-date-picker v-model="studentInfo.createTime" value-format="timestamp" type="datetime" placeholder="请选择创建时间"/>
              </el-form-item>

              <el-form-item>
                  <el-button type="primary" @click="submitForm('studentForm')">立即修改</el-button>
                  <el-button @click="resetForm('studentForm')">清空</el-button>
              </el-form-item>
          </el-form>
        </div>
      </div>
</div>
</template>

<script>
import sexs from "@/data/sexs"
import status from "@/data/status"
import rules  from "@/data/studentRules"
  export default {
    data() {
      return {
        specialitys:[],
        levels:[],
        sexs,
        status,
        studentInfo:{
          username: '',
          sex:'',
          birth: '',
          speciality:{
            id:""
          },
          level:{
            id:''
          },
          isEnable:'',
          phoneNum:'',
          address:'',
          createTime:''
        },
        rules,
        id : this.$route.query.id || 1
      };
    },
    methods: {
      async getData() {  
        // 获取专业列表
        let res = await this.$store.dispatch('dataBase/getSpecialityList') 
        if(res.code == 1) {
            this.specialitys = res.data
        }else{
            this.$message({ showClose: true,message: res.msg, type: 'error'})
        }
        // 获取客户类型列表
        res = await this.$store.dispatch('dataBase/getLevelList') 
        if(res.code == 1) {
            this.levels = res.data
        }else{
            this.$message({ showClose: true,message: res.msg, type: 'error'})
        }
      },
      async getStudentInfo() {
        const res = await this.$store.dispatch('student/getInfo',this.id) 
        if(res.code == 0) {
          this.$message({ showClose: true, message: res.msg, type: 'error'})
        }else{
            this.studentInfo  = res.data
        }
      },
      submitForm(formName) {
        this.$refs[formName].validate(async (valid) => {
          if (valid) {

            const {code, msg} = await this.$store.dispatch('student/editStudent',this.studentInfo)
            if(code == 1) {
              this.$message({ showClose: true,message: msg, type: 'success' })
            }else {
              this.$message({ showClose: true,message: msg, type: 'error' })
            }
          } else {
            this.$message({ showClose: true, message: '请输入填写合法的表单数据', type: 'error'})
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
        this.$message({ showClose: true, message: '清空成功', type: 'success'  })
      }
    },
    mounted() {
      this.getData()
      this.getStudentInfo()
    }
  }
</script>


<style lang="scss" scoped>
    .app-container{
        position: absolute;
         left: 0;
         right: 0;
         height: 100%;
        padding: 30px;
        background-size: cover;
        background-attachment: fixed;
        background-image: url(https://cdn.jsdelivr.net/npm/kang-static/home/assets/bg/005.jpg);
        background-repeat: no-repeat;
            
        .header{
            text-align: center;
            z-index: -999;
            margin-bottom: 20px;
            font-size: 20px;
            color: #606266;
            font-weight: 700;
        }
        .form-container{
            display: flex;
            justify-content: center;
            align-items:center;
            padding-top: 30px;
            width: 500px;
            margin: 0 auto;
            border-radius: 5px;
            background: hsla(0,0%,100%,.5);
            box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
        }
        .form{
            width: 400px;
        }
    }
</style>